<template>
  <div class="bidding_styl">
    <img class="img_styl" src="@/assets/images/back_bidding.png" alt="" srcset="" />
    <div class="bidding_search">
      <div class="search_content">
        <div class="search_left">
          <div @click="clickTabs('999')" class="btn_styl" :class="[chooseTab == '999' ? 'btn_stylCopy' : '']">全部</div>
          <div @click="clickTabs('1')" class="btn_styl" :class="[chooseTab == '1' ? 'btn_stylCopy' : '']">即将开始</div>
          <div @click="clickTabs('2')" class="btn_styl" :class="[chooseTab == '2' ? 'btn_stylCopy' : '']">进行中</div>
          <div @click="clickTabs('3')" class="btn_styl" :class="[chooseTab == '3' ? 'btn_stylCopy' : '']">已结束</div>
        </div>
        <!-- <div class="search_right">
          @click="chooseMyJoin = !chooseMyJoin"
          <div
            class="btn_join"
            :class="[chooseMyJoin ? 'btn_joinCopy' : '' ]"
          >
            参与中
            <Icons
              v-if="!chooseMyJoin"
              font="#icon-jp3"
              class="icon-jp3"
              fontSize="16px"
            ></Icons>
            <Icons
              v-else
              font="#icon-jp21"
              class="icon-jp21"
              fontSize="16px"
            ></Icons>
          </div>
        </div> -->
      </div>
    </div>
    <div class="bidding_content">
      <div class="bidding_item1" v-if="MX_DataList.length == 0">
        <QdNoData ref="QdNoData" titleContent="暂无竞拍信息 ~"></QdNoData>
      </div>
      <Spin fix v-if="MX_tableLoading"></Spin>
      <div @click="toPageFun('/bidding/bidding-detail', item.id)" class="bidding_item" v-for="(item, index) in MX_DataList" :key="index">
        <img class="img_styl1" :src="imagePreviewUrl + item.imgUrl[0]" />
        <!-- <img class="img_styl1" src="@/assets/images/bidding_list.png" v-else alt=""> -->
        <div class="item_bottom">
          <div class="bidding_name">{{ item.name }}</div>
          <div class="bidding_time">
            <div class="item_label">开始时间:&nbsp;</div>
            <div class="item_time">{{ item.startTime }}</div>
          </div>
          <div class="bidding_time">
            <div class="item_label">结束时间:&nbsp;</div>
            <div class="item_time">{{ item.endTime }}</div>
          </div>
          <div class="bidding_time">
            <div class="item_label">竞拍总量:&nbsp;</div>
            <div class="item_num">{{ item.showZnum == 1 ? item.num : "****" }} 吨</div>
            <!-- {{ item.num }} -->
          </div>
          <div class="bidding_time">
            <div class="item_label">竞拍类型:&nbsp;</div>
            <div class="bidding_type" :class="[item.biddingMode == 1 ? 'bidding_type1' : '']">
              {{ item.biddingMode == 2 ? "拆分竞价" : "整体竞价" }}
            </div>
          </div>
          <div class="btn_bottom">
            <div v-if="item.status == 1" class="btn_status">即将开始</div>
            <div v-if="item.status == 2" class="btn_status btn_status1">正在进行</div>
            <div v-if="item.status == 3 || item.status == 4" class="btn_status btn_status2">竞拍结束</div>
          </div>
        </div>
      </div>
    </div>
    <div class="page_styl">
      <Page v-if="MX_DataList.length != 0" :page-size="MX_pageSize" :total="MX_total" @on-change="MX_changePage" show-total />
    </div>
  </div>
</template>

<script>
import searchListMinxins from "@/mixins/searchListMinxins";
import QdNoData from "@/components/common/Qd-NoData.vue";
import localData from "../../../localData";

export default {
  components: { QdNoData },
  mixins: [searchListMinxins],
  data() {
    return {
      MX_DataList: [],
      chooseTab: "999",
      MX_pageSize: 12,
      chooseMyJoin: false,
      MX_apis: {
        getlist: "API_activityList"
      },
      imagePreviewUrl: localData.API_URl + "/guns"
    };
  },
  mounted() {
    this.MX_getData();
  },
  methods: {
    clickTabs(status) {
      this.chooseTab = status;
      this.MX_searchparams.status = status;
      this.MX_getData();
    },
    toPageFun(path, id) {
      this.$router.push({
        path: path,
        query: {
          id
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

.bidding_styl {
  width: 100%;
  min-height: 500px;
  padding-bottom: 150px;
  background-color: #f3f3f3;

  .img_styl {
    display: block;
    width: 100%;
  }

  .bidding_search {
    width: 100%;
    height: 78px;
    background-color: #ffffff;

    .search_content {
      .flex-x();
      width: 1185px;
      height: 100%;
      margin: 0 auto;

      .search_left {
        .flex-x(flex-start);

        .btn_styl {
          .hollow-btn(109px, 36px, 100px, #ffffff, #d2d2d2, #333333);
          margin-right: 12px;
        }

        .btn_stylCopy {
          color: @themeColor;
          border: 1px solid @themeColor;
          background-color: #f0f6ff;
        }
      }

      .search_right {
        .btn_join {
          .hollow-btn(109px, 36px, 100px, #f0f6ff, #2973e4, #2973e4);
        }

        .btn_joinCopy {
          color: #ffffff;
          background-color: @themeColor;
        }
      }
    }
  }

  .bidding_content {
    position: relative;
    .flex-x(flex-start);
    flex-wrap: wrap;
    width: 1185px;
    margin: 18px auto 0 auto;

    .bidding_item1 {
      width: 100%;
      height: 600px;
      background-color: #ffffff;
    }

    .bidding_item {
      margin: 0 13.6px 22px 0;
      background-color: #ffffff;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
      }

      &:nth-child(4n) {
        margin-right: 0;
      }

      .img_styl1 {
        width: 286px;
        height: 184px;
        display: block;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }

      .item_bottom {
        .flex-y(space-btween, flex-start);
        padding: 10px 12px 0 12px;
        border: 1px solid #e6e6e6;
        border-top: 0;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;

        .bidding_name {
          font-size: 16px;
          font-weight: bold;
        }

        .bidding_time {
          .flex-x(flex-start);
          margin-top: 4px;
          color: #999999;

          .bidding_type {
            color: @themeColor;
          }

          .bidding_type1 {
            color: #ff7801;
          }

          .item_num {
            color: #00b399;
          }
        }

        .btn_bottom {
          position: relative;
          width: 100%;
          height: 45px;

          .btn_status {
            position: absolute;
            right: -12px;
            padding: 6px 20px;
            color: #ffffff;
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
            background-color: #00c2a6;
          }

          .btn_status1 {
            background-color: #eb0045;
          }

          .btn_status2 {
            background-color: #c5c5c5;
          }
        }

        .btn_count {
          .flex-x();
          width: 100%;
          border-top: 1px solid #e6e6e6;

          .btn_look {
            .flex-x(center);
            width: 50%;
            padding: 12px 0;

            .num_styl {
              margin-right: 6px;
              font-weight: bold;
              color: #333333;
            }

            .unit_styl {
              color: #9e9e9e;
              font-size: 12px;
            }
          }
        }
      }
    }
  }

  .page_styl {
    width: 1185px;
    margin: 0 auto;
    text-align: right;
  }
}
</style>
